<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选项卡特效</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="tabs">
    <div class="tab-buttons">
        <button class="tab-button active" onclick="openTab(event, 'Tab1')">国际政治</button>
        <button class="tab-button" onclick="openTab(event, 'Tab2')">国内社会事件</button>
        <button class="tab-button" onclick="openTab(event, 'Tab3')">科技动态</button>
        <button class="tab-button" onclick="openTab(event, 'Tab4')">娱乐热点</button>
        <button class="tab-button" onclick="openTab(event, 'Tab5')">体育赛事</button>
    </div>
    <div id="Tab1" class="tab-content active">
        <h2>国际政治：特朗普计划公布肯尼迪遇刺案8万页机密文件，引发全球关注</h2>
        <p>该标题聚焦于国际政治事件，涉及美国前总统特朗普计划公布关于肯尼迪遇刺案的大量机密文件，这一举动无疑将引发全球范围内的关注和讨论。</p>
    </div>
    <div id="Tab2" class="tab-content">
        <h2>国内社会事件：蜜雪冰城食品安全问题再曝光，监管部门介入调查</h2>
        <p>该标题涉及国内社会事件，具体指向蜜雪冰城这一知名品牌的食品安全问题再次被曝光，监管部门已经介入调查，保障消费者权益。</p>
    </div>
    <div id="Tab3" class="tab-content">
        <h2>科技动态：“智能体”AI产品Manus引发广泛关注，人工智能领域再掀热潮</h2>
        <p>该标题关注科技领域最新动态，介绍了一款名为Manus的“智能体”AI产品，该产品能够同时思考问题和执行任务，引发了广泛关注。</p>
    </div>
    <div id="Tab4" class="tab-content">
        <h2>娱乐热点：刘晓庆回应“8个男友”传闻，称婚姻不能随便结</h2>
        <p>该标题涉及娱乐圈的热门话题，刘晓庆作为知名演员，对近期关于她“8个男友”的传闻进行了回应，表达了她对婚姻的看法。</p>
    </div>
    <div id="Tab5" class="tab-content">
        <h2>体育赛事：NBA常规赛：湖人队险胜步行者队，詹姆斯关键时刻发挥出色</h2>
        <p>该标题报道了体育赛事，具体为NBA常规赛中湖人队与步行者队的比赛结果，以及詹姆斯在关键时刻的出色表现。</p>
    </div>
</div>

<script src="script.js"></script>
</body>
</html>